<template>
  <div class="contend schoolContend">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 全国驾校</span>
      </div>
      <div class="contendBox">
        <div class="left">
          <div class="formBox">
            <formSearch
              :filteroptions="filterOptions.filter"
              :sortTypeList="filterOptions.order"
              @search="fliterSearch"
            ></formSearch>
          </div>
          <div class="listBox">
            <schoolitem
              v-if="schoolList.length > 0"
              v-for="(item, i) in schoolList"
              :key="i"
              :drivingSchoolItem="item"
            ></schoolitem>
            <el-pagination
              v-if="schoolList.length > 0"
              @size-change="handleSizeChange"
              :current-page.sync="page"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20]"
              :page-size="10"
              background
              layout="total, sizes, prev, pager, next"
              :total="pagination.total"
            >
            </el-pagination>
            <div class="nodataBox" v-if="schoolList.length == 0">
              <img src="~/assets/images/nodata.png" alt="" />
              <span class="tips">暂无数据</span>
            </div>
          </div>
        </div>
        <div class="right">
            <div class="cardBox" v-if="page > 1">
            <div class="title">
              <span>推荐驾校 </span>
            </div>
            <div class="cardContend">
              <div
                class="authority"
                v-for="(authority, i) in schoolListQw"
                :key="i"
              >
                <div class="authorityleft">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                  <nuxt-link
                    :to="{
                      name: 'school-schoolDetails-id',
                      query: { schoolId: authority.id },
                    }"
                  >
                    <span v-if="i != 0" class="curp">{{
                      authority.short_title
                    }}</span>
                  </nuxt-link>
                </div>
                <span class="people" v-if="i != 0"
                  >{{ authority.sCount }}人</span
                >
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                    <nuxt-link
                      :to="{
                        name: 'school-schoolDetails-id',
                        query: { schoolId: authority.id },
                      }"
                    >
                      <span class="contenttitle curp">{{
                        authority.short_title
                      }}</span>
                    </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img
                        v-if="authority.cAvg < 5"
                        src="~/assets/images/rankstarhui.png"
                        alt=""
                        v-for="num in 5 - authority.cAvg"
                        :key="num"
                      />
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card articleItemCard">
            <div class="title">
              <span>热门文章 </span>
            </div>
            <div class="cardContend">
              <articleItem
                v-if="articleList.length > 0"
                v-for="(articleItem, i) in articleList"
                :key="i"
                :articleItem="articleItem"
              ></articleItem>
            </div>

            <!-- <div class="title">
              <span>5条你最关心的学车问题 </span>
            </div>
            <div class="cardContend">
              <span class="contitle"> 　<span>1.</span>学车学什么？ </span>
              <span class="tips"
                >科目一是理论考试，不能掉以轻心，考试前一定检查好身证。到了考场要是发现身份证没带，那可就麻烦了。科目二是上车考试，有五项技能考试，倒车入库、直角转弯、侧方停车、曲线行驶、上坡定点停车和坡道起步。上车后一定要先调整好座位，的那就是心态。心态决定一切，越到最后越要谨慎小心。</span
              >
            </div> -->
          </div>
        
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import formSearch from "@/components/formSearch.vue";
import schoolitem from "@/components/schoolitem.vue";
import { school, article } from "~/api/commen";

import articleItem from "@/components/articleItemCard.vue";
export default {
  components: { formSearch, schoolitem, articleItem },
  data() {
    return {
      formSearch: {},
      page: 1,
      rows: 10,
    };
  },
  async asyncData({ app, query, params }) {
    let data = await school({ page: 1, rows: 10 });
    let articleList = await article({ page: 1, rows: 6, category: 0 });
    return {
      schoolList: data.list,
      pagination: data.page,
      filterOptions: data.filterOption,
      schoolListQw: data.list.slice(0, 5),
      articleList: articleList.list,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.rows = val;
      this.getschool();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getschool();
    },
    //驾校
    async getschool(formSearch) {
      let params = { page: this.page, rows: this.rows };
      if (formSearch) {
        params = Object.assign(params, formSearch);
      }
      let data = await school(params);
      this.schoolList = data.list;
      this.pagination = data.page;
    },
    fliterSearch(formSearch) {
      this.getschool(formSearch);
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/school.scss";
::v-deep {
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>